import React,{useState} from 'react';
import MDL from 'react-markdown-editor-lite';
import MI from 'markdown-it';
import 'react-markdown-editor-lite/lib/index.css';
import {CheckCircleOutlined} from '@ant-design/icons';
import {Input,Select,Form,Button} from 'antd';
import {usersubmitContent} from '../../API/axios/user';

function Userarticles() {

    const {Option} = Select;
    const [form] = Form.useForm();
    const MD = React.createRef();
    const MIP = new MI();

    const submitContent = async () => {
        usersubmitContent({sort:form.getFieldValue("sort"),titles:form.getFieldValue("title"),acontent:MD.current.getHtmlValue()}).then( res => {
            alert(res.data)
        });
    };

    return(
        <div>
            <Button shape={"circle"} onClick={submitContent}
                    style={{"position":"absolute","marginLeft":"80vw","width":"6vw","height":"6vw"}}>
                <CheckCircleOutlined style={{"fontSize":"4vw"}}/>
            </Button>
            <Form form={form} style={{ "width":"20vw","margin":"5vh 10vw"}} hideRequiredMark>
                <Form.Item name={"sort"} label={"选择类别"} rules={[{ required: true, message: '请选择类别' }]}>
                    <Select showSearch style={{ "width":"10vw"}} placeholder={"选择类别"}>
                        <Option value="技术">技术</Option>
                        <Option value="心情">心情</Option>
                        <Option value="杂谈">杂谈</Option>
                        <Option value="求职面试">求职面试</Option>
                    </Select>
                </Form.Item>
                <Form.Item name={"title"} label={"输入标题"} rules={
                    [{ required: true, message: '请选择类别' },
                     { min: 3, max: 30, message: '标题范围为3到30个字符'}]}>
                    <Input placeholder={"输入标题"}/>
                </Form.Item>
            </Form>
            <MDL ref={MD} placeholder={"请在此编辑"} style={{ height: "60vh","width":"70vw","margin":"5vh 15vw" }} renderHTML={(text) => MIP.render(text)}/>
        </div>
    )
}

export default Userarticles;
